// 列表
.list {
    &.page_auto_list {
        height: calc(100vh - 190px);
        overflow: auto;
        &.showFilterClasscolumns {
            height: calc(100vh - 257px);
            overflow: auto;
        }
        &.page_auto_list-active {
            height: calc(100vh - 257px);
            padding-bottom: 160px;
        }
        &.page_auto_list-criteria {
            height: calc(100vh - 257px);
        }
        &.page_auto_list-no-criteria {
            height: calc(100vh - 257px);
        }
    }

    .ant-checkbox-group {
        width: 100%;
    }
    ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        li {
            cursor: pointer !important;
            pointer-events: auto;
            padding: 0 10px 0px 0;
            margin-bottom: 15px;
            position: relative;
            width: calc((100% - 6 * 0px) / 7);
            &.check-show-li {
                width: calc((100% - 6 * 0px) / 3);
                margin-bottom: 0;
                .title b {
                    font-size: 12px !important;
                }
            }
            &:nth-child(7n) {
                margin-right: 0px;
                .handleBox {
                    right: 6%;
                    &::before {
                        position: absolute;
                        content: "";
                        width: 100%;
                        background: transparent;
                        height: 20px;
                        right: 0;
                        top: -10px;
                    }
                }
            }

            .viewBtn {
                position: absolute;
                right: 15px;
                top: 15px;
                img {
                    width: 24px;
                }
            }
            .checkbox-section {
                position: absolute;
                z-index: 100;
                top: 6px;
                left: 18px;
            }

            .handleBtn {
                position: absolute;
                top: 8px;
                right: 16px;
                height: 20px;
                z-index: 100;
                display: none;
            }
            &:hover {
                .cover-img {
                    transform: scale(1.1);
                }
                .box {
                    filter: brightness(70%);
                }
                .tags,
                .state-wrapper {
                    display: none;
                }
                .handleBtn {
                    display: block;
                    &:hover ~ .handleBox {
                        display: block;
                    }
                }
            }
            .tags {
                position: absolute;
                left: 15px;
                // top: calc((100% - 87px));
                bottom: 5px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: calc(100% - 30px);
                z-index: 100;
                display: flex;
                align-items: center;
                span {
                    b {
                        background: rgba($color: #000000, $alpha: 0.5);
                        padding: 3px 4px;
                        color: #fff;
                        font-size: 12px;
                        border-radius: 4px;
                        margin-right: 5px;
                        display: inline-block;
                    }
                }
                .tagsMore {
                    height: 18px;
                }
            }
            .box {
                // &:hover {
                //     filter: brightness(50%);
                // }
                overflow: hidden;
                border-radius: 4px;
                position: relative;
                transition: all 0.3s linear;
                padding-top: 75%;
                width: 100%;
                background-color: #EDEFF2;
                .lock-icon {
                    font-size: 20px;
                    color: #fff;
                    position: absolute;
                    right: 10px;
                    top: 10px;
                }

                .item-img-tag {
                    display: inline-block;
                    width: 70px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    background: linear-gradient(
                        131deg,
                        #8ddbff 0%,
                        #49a1ff 100%
                    );
                    font-size: 14px;
                    color: #ffffff;
                    position: absolute;
                    left: 0;
                    top: 10px;
                    z-index: 10;

                    &.pay {
                        background: linear-gradient(
                            131deg,
                            #e5d2b1 0%,
                            #ac9a68 100%
                        );
                    }
                }

                .folder-icon {
                    max-width: 50%;
                    position: absolute;
                    z-index: 1;
                    transform: translate(-50%, -50%);
                    top: 50%;
                    left: 50%;
                }
                .cover-img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    inset: 0;
                    border-radius: 4px;
                    -o-object-fit: cover;
                    object-fit: cover;
                    transition: all 0.3s linear;
                    // margin: 0 auto;
                    // position: absolute;
                    // transform: translate(-50%, -50%);
                    // top: 50%;
                    // left: 50%;
                }
                .type {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    span {
                        padding: 3px 4px;
                        color: #3ac46b;
                        background: rgba(0, 0, 0, 0.7);
                        border-radius: 2px;
                        font-size: 12px;
                    }
                }

                // 文件夹预览
                .folderIcon {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 100%;
                    width: 100%;
                }
                .folderNum {
                    position: absolute;
                    width: 100%;
                    bottom: 6%;
                    left: 0;
                    text-shadow: 0 0 0;
                    text-align: center;
                    color: #a47d1c;
                    font-size: 12px;
                    z-index: 5;
                }
                .preview-folder-box {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 100%;
                    width: 100%;
                    z-index: 1;
                    dl {
                        transform: translate(-50%, -50%);
                        left: 50%;
                        top: 46%;
                        overflow: hidden;
                        position: absolute;
                        z-index: 2;
                        height: 52%;
                        width: 68%;
                        margin: 0 auto;
                        flex-wrap: wrap;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        dd {
                            width: 49%;
                            height: 48%;
                            overflow: hidden;
                            border-radius: 4px;
                            background: rgba(244, 185, 48, 0.5);
                            opacity: 1;
                            border: 1px solid rgba(255, 255, 255, 0.1);
                        }
                        .preview-cover-img {
                            width: 100%;
                        }
                    }
                }

                &.zutu{
                    .zutu-wrapper{
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
    
                        .zutu-bar{
                            width: 100%;
                            height: 12.35%;
                            background-image: url('../img/zutu_bar.png');
                            background-size: 100%;
                            position: absolute;
                            top: 0;
                            z-index: 2;
                        }
    
                        .zutu-box{
                            position: absolute;
                            top: 10%;
                            width: 100%;
                            height: 90%;
                            z-index: 3;
    
                            >img{
                                width: 100%;
                                border-top-left-radius: 4px;
                                border-top-right-radius: 4px;
                            }

                            &.zutu-no{
                                background-color: rgba($color: #DFE3E7, $alpha: 0.5);

                                .no-zutu{
                                    width: 65px;
                                    height: 65px;
                                    display: block;
                                    margin: 16px auto 0;
                                }
                            }

                            .zutu-info{
                                width: 100%;
                                height: 32px;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
                                border-top: 1px solid #ebebeb;
                                position: absolute;
                                bottom: 0;
                                padding: 0 8px;

                                .zutu-arrow{
                                    background-image: url('../img/zutu_arrow.png');
                                    display: inline-block;
                                    width: 10px;
                                    height: 10px;
                                    background-size: cover;
                                }

                                .zutu-text{
                                    font-size: 12px;
                                    color: #fff;
                                    
                                    >i{
                                        background-image: url('../img/zutu_arrow.png');
                                        display: inline-block;
                                        width: 10px;
                                        height: 10px;
                                        background-size: cover;
                                        margin-left: 2px;
                                    }
                                }

                                .zutu-num{
                                    display: flex;
                                    justify-content: flex-start;
                                    align-items: center;
                                    font-size: 12px;
                                    color: #fff;

                                    .num{
                                        margin-right: 10px;

                                        >i{
                                            background-image: url('../img/zutu_video.png');
                                            display: inline-block;
                                            width: 14px;
                                            height: 14px;
                                            background-size: cover;
                                            margin-right: 2px;
                                            vertical-align: bottom;
                                        }

                                        &.video >i{background-image: url('../img/zutu_img.png');}
                                    }
                                }
                            }
                        }
                    }
                }

                &.folders-box{background-color: transparent;}

                // .folder-box {
                //     width: 100%;
                //     height: 100%;
                //     position: absolute;
                //     inset: 0;
                //     border-radius: 4px;
                //     -o-object-fit: cover;
                //     object-fit: cover;
                //     transition: all 0.3s linear;
                //     overflow: hidden;
                //     .folder-icon {
                //         width: 60px;
                //         left: auto;
                //         top: 0;
                //         right: 0;
                //         transform: none;
                //     }
                //     img {
                //         width: 100%;
                //         cursor: pointer;
                //         pointer-events: auto;
                //     }
                //     dl {
                //         display: flex;
                //         justify-content: space-between;
                //         margin: 0;
                //         padding: 0;
                //         height: 100%;
                //         // position: absolute;
                //         // left: 0;
                //         // top: 0;
                //         // width: 100%;
                //         // height: 100%;
                //         // overflow: hidden;
                //         dd {
                //             margin: 0;
                //             padding: 0;
                //             width: 49%;
                //             height: 216px;
                //             height: 100%;
                //             position: relative;
                //             overflow: hidden;
                //             .cover-img1 {
                //                 width: 100%;
                //                 display: block;
                //                 position: absolute;
                //                 transform: translate(-50%, -50%);
                //                 top: 50%;
                //                 left: 50%;
                //                 cursor: pointer;
                //                 pointer-events: auto;
                //                 max-height: 100%;
                //             }
                //         }
                //     }
                //     .up {
                //         height: 60%;
                //         border-bottom: 4px solid #fff;
                //         overflow: hidden;
                //         .cover-img1 {
                //             // max-height: 100%;
                //             margin: 0 auto;
                //             display: block;
                //         }
                //     }
                //     .down {
                //         height: 40%;
                //         overflow: hidden;
                //         .cover-img1 {
                //             display: block;
                //             margin: 0 auto;
                //             vertical-align: top;
                //             left: 0;
                //             top: 0;
                //             transform: none;
                //         }
                //     }
                //     &.more-box {
                //         dl dd {
                //             width: 32%;
                //             .cover-img1 {
                //                 height: 100%;
                //                 width: auto;
                //             }
                //         }
                //     }
                //     &.three-box {
                //         dl dd {
                //             .cover-img1 {
                //                 width: 100%;
                //                 height: auto;
                //                 max-height: none;
                //             }
                //         }
                //     }
                //     &.two-box {
                //         dl dd img {
                //             height: 100%;
                //             width: auto;
                //             transform: none;
                //             position: static;
                //         }
                //     }
                // }
                &.audio-box {
                    .type {
                        span {
                            color: #6da8ff;
                        }
                    }
                }
                &.video-box {
                    .type {
                        span {
                            color: #e6a23b;
                        }
                    }
                    .playIcon {
                        width: 40px;
                        position: absolute;
                        transform: translate(-50%, -50%);
                        top: 50%;
                        left: 50%;
                        z-index: 800;
                    }
                }
                &.gaojian-box {
                    .type {
                        span {
                            color: #d285ff;
                        }
                    }
                    .text {
                        color: #303133;
                        font-size: 14px;
                        text-shadow: 0 0 0;
                        padding: 15px 10px 10px 10px;
                        background: #fff;
                        width: 90%;
                        height: 100%;
                        margin: 20px auto 0;
                        line-height: 24px;
                        span {
                            display: -webkit-box;
                            -webkit-line-clamp: 3;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                    .folder-icon {
                        margin-top: 38px;
                    }
                }

                &.more-box {
                    .up {
                        height: 150px;
                        border-bottom: 4px solid #fff;
                        overflow: hidden;
                    }
                    .down {
                        height: 62px;
                        overflow: hidden;
                        dl {
                            display: flex;
                            dd {
                                width: 32%;
                                justify-content: space-between;
                            }
                        }
                        .cover-img1 {
                            display: block;
                            margin: 0 auto;
                            vertical-align: top;
                            left: 0;
                            top: 0;
                            transform: none;
                        }
                    }
                }
            }
            .title {
                width: 100%;
                overflow: hidden;
                font-size: 12px;
                color: #909399;
                b {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    color: #303133;
                    margin: 6px 0 2px;
                    font-size: 14px;
                    display: block;
                    line-height: 20px;

                    &.foldertitle{text-align: center;}
                }
                .shareName {
                    color: #909399;
                    margin: 0px 0 8px;
                    // line-height: 20px;
                }
                input {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }

            .handleBox {
                position: absolute;
                right: -12%;
                top: 30px;
                color: #303133;
                font-size: 12px;
                text-shadow: 0 0 0;
                z-index: 999;
                background: #fff;
                border-radius: 4px;
                display: none;

                &:hover {
                    display: block;
                }
                &::before {
                    position: absolute;
                    content: "";
                    width: 60px;
                    height: 20px;
                    left: 0;
                    top: -10px;
                    background: transparent;
                }
                p {
                    width: 64px;
                    padding: 11px 0;
                    cursor: pointer;
                    pointer-events: auto;
                    text-align: left;
                    text-indent: 10px;
                    &:nth-child(1) {
                        border-top-left-radius: 4px;
                        border-top-right-radius: 4px;
                    }
                    &:last-child {
                        border-bottom-left-radius: 4px;
                        border-bottom-right-radius: 4px;
                    }
                    &:hover {
                        background: #eee;
                    }
                }
            }

            &.active {
                .box {
                    filter: brightness(70%);
                }
            }

            &.hiddenBox{display: none;}
        }
    }
}
// 媒资审核样式
.check-page {
    height: calc(100vh - 60px);
    overflow: hidden;
    .handle-edit {
        height: 40px;
        border-radius: 4px 4px 4px 4px;
        padding: 0 0 0 8px;
        margin: 0 0 10px 0;
        .handle-edit-left {
        }
        .handle-edit-right {
            .span {
                margin: 0 24px 0 0;
            }
            img {
                width: 14px;
            }
            .close-bt {
                font-size: 14px;
                font-weight: 400;
                color: #303133;
                padding: 0 0 0 24px;
                position: relative;
                &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    width: 1px;
                    height: 20px;
                    background: rgba(0, 0, 0, 0.1);
                    border-radius: 0px 0px 0px 0px;
                }
                label {
                    cursor: pointer;
                }
            }
        }
    }

    li {
        position: relative;
    }
    .list ul li .box .type {
        left: 10px;
        span {
            color: #ff6666;
        }
    }
    .page_auto_list {
        // height: calc(100vh - 252px);
    }
    .oper_page_auto_list {
        .init_data_main {
            min-height: calc(100vh - 320px) !important;
        }
    }
    .list {
        padding-top: 8px;
        padding-left: 4px;

        .init_data_main {
            min-height: calc(100vh - 270px);
            ul {
                li {
                    border: 2px solid transparent;
                    padding-top: 8px;
                    b {
                        font-weight: normal;
                    }
                    .checkbox-section {
                        top: 16px;
                    }
                    &.checked {
                        .box {
                            filter: brightness(70%);
                        }
                    }
                    &.active {
                        border: 2px solid #f6611d;
                        border-radius: 4px;
                        z-index: 200;
                        .box {
                            filter: brightness(70%);
                        }
                    }
                    &:hover {
                        box-shadow: 2px 2px 5px #e5e5e5, 2px -2px 5px #e5e5e5,
                            -2px 2px 5px #e5e5e5, -2px -2px 5px #e5e5e5;
                        transition: 0.1s linear;
                    }
                }
                // 媒资审核里面的样式哈
                .state-wrapper-check {
                    position: absolute;
                    top: 14px;
                    right: 18px;
                    z-index: 2;
                    span {
                        color: #fff;
                        border-radius: 3px;
                        display: inline-block;
                        padding: 2px 4px;
                        font-size: 12px;
                        &.state-0 {
                            background: gray;
                        }
                        &.state-1 {
                            background: #edb24e;
                        }
                        &.state-3 {
                            background: #de5d33;
                        }
                        &.state-2 {
                            background: #6bc588;
                        }
                    }
                }
            }
        }
    }

    .pagination-box {
        text-align: center;
        margin: 20px auto;
        ul {
            justify-content: center;
        }
    }
}

.no-data-box {
    font-size: 16px;
    color: #999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    img {
        width: 120px;
    }
    .txt {
        margin-top: -10px;
    }
}

.admin-page,
#netdisk-page {
    .ant-input[disabled] {
        background: transparent;
        color: rgba(0, 0, 0, 0.88);
    }
    .ant-input-disabled {
        background: transparent !important;
        color: rgba(0, 0, 0, 0.88) !important;
        cursor: pointer;
        pointer-events: auto;
    }
    .ant-input {
        border: none;
        padding-left: 0;
        &.active {
            border: 1px solid #f6611d !important;
        }
    }
    .shareName {
        // margin: 0px 0 8px;
        // line-height: 20px;
    }
}

.checkAllText {
    margin-left: 5px;
}

.loading {
    position: absolute;
    z-index: 99999999;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    left: 0;
    top: 0;
    .ant-spin-spinning {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

#buy-page {
    .title {
        margin-top: 5px;
        b {
            display: block;
            margin-bottom: 5px;
        }
    }
    b {
        font-weight: normal;
    }
}

.admin-page.work-page .no-data-box {
    position: static;
    transform: none;
}
